<{include file="public/header" /}>

<style>
  .layui-table tbody tr:hover {
      background-color: transparent;
  }
  .layui-table-cell{
    height:auto;
    /*line-height:50;*/
    text-overflow: inherit;
    white-space: normal;
  }
</style>
<body>
        
<!-- <blockquote class="layui-elem-quote layui-text" style="margin-bottom: 0px;background-color: white">
  说明：请认真填写，不能修改！
</blockquote> -->

<!-- 选项卡开始 -->
<div class="layui-tab layui-tab-card" style="margin-top: -1px;">
  <ul class="layui-tab-title">
    <li class="layui-this">标题</li>
    <li >选择</li>
    <li >填空</li>
    <li >简答</li>
  </ul>
  <div class="layui-tab-content">
    <!-- 标题选项卡5 -->
    <div class="layui-tab-item layui-show">
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
          <legend>添加标题</legend>
      </fieldset>
      <form class="layui-form" action="">

          <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
              <input type="text" name="qtitle" required  lay-verify="required" placeholder="如：一、选择题（共8个小题，每小题4分，共32分）" autocomplete="off" class="layui-input" >
            </div>
          </div>
           
          <div class="layui-form-item">
                <input type="hidden" name="qtype" id="type" value="5">
          </div>

          <!-- <div class="layui-form-item">
                <input type="hidden" name="isright" id="type" value="0">
          </div> -->

          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="titlesub" type = "button">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
          <div style="height: 150px;"></div>
      </form>
    </div>
    <!-- 标题选项卡结束5 -->
    <!-- 单选题选项卡1 -->
    <div class="layui-tab-item">

      <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
          <legend>添加单选题</legend>
      </fieldset> -->
      <form class="layui-form" >
       <!--  单选还是多选 -->
        <div class="layui-form-item" id="selecttyperadio">
          <input type="radio" name="qtype" value="1" title="单选题" lay-filter="selecttype" checked>
          <input type="radio" name="qtype" value="2" title="多选题" lay-filter="selecttype">
        </div>
       <!-- 问题编辑框 -->
        <div class="layui-form-item">
          <textarea id="question" name="question" placeholder="问题题干" lay-verify="question" class="layui-textarea" >问题题干</textarea> 
        </div>
       <!--  选项编辑框 -->
        <table class="layui-table">
          <colgroup>
            <col width="70%">
            <col width="30%">
          </colgroup>
          <thead>
            <tr>
              <th><center>选择题选项以及正确答案</center></th>
              <!-- <th>是否正确答案</th> -->
            </tr> 
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="layui-form-item">
                  <textarea id="answer" name="answer[]" placeholder="选项1"  class="layui-textarea" lay-verify="answer"></textarea>
                </div >
              </td>
              <!-- <td>
                <div class="layui-form-item">
                  <input type="checkbox" name="isright[]" value="1" title="是">
                </div>
              </td> -->
            </tr>
            
            
            <tr>
              <td>
                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-xs layui-btn-primary" id="showright">正确答案  <i class="layui-icon layui-icon-down"></i> </button>
                  <div id="rightbox">
                    
                  </div>
                  <!-- <textarea id="answer4" name="answer[]" placeholder="选项4" lay-verify="answer4" class="layui-textarea" >选项4</textarea> -->
                </div >
              </td>
              <!-- <td>
                <div class="layui-form-item">
                  <input type="checkbox" name="isright[]" value="1"  title="是">
                </div>
              </td> -->
            </tr>
             
          </tbody>
        </table>

          <!-- <div class="layui-form-item">
                <input type="hidden" name="qtype" id="type" value="1">
          </div> -->


          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit id="select" lay-filter="select" type = "button">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
          <div style="height: 150px;"></div>
      </form>
    </div>
    <!-- 单多选题选项卡结束1 -->
   <!--  填空选项卡3start -->
    <div class="layui-tab-item">
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
          <legend>添加填空题</legend>
      </fieldset>
    </div>
    <!--  填空选项卡end -->
    <!--  简答选项卡start -->
    <div class="layui-tab-item">
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
          <legend>添加简答题</legend>
      </fieldset>
    </div>
    <!--  简答选项卡end -->
  </div>
</div>
<!-- 选项卡结束 -->

<script type="text/javascript" src="__ROOT__/public/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__ROOT__/public/static/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__ROOT__/public/static/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    var url="<{:url('ueditor/index')}>";
    var ue = UE.getEditor('answer',{
      serverUrl :url 
      , toolbars: [[
            'fullscreen', 
            'simpleupload','|', 'insertimage'
        ]] 
    });
</script>




<script>

layui.use(['form','element','layer','jquery','layedit'], function(){
  var $ = layui.$,element = layui.element,form = layui.form,layer = layui.layer,layedit = layui.layedit;
  //----------上面引入layui下面开始业务，分割一下-----------------//
  //初始化富文本
  layedit.set({
    uploadImage: {
      url: "<{:url('upload/upimg')}>" //接口url
      ,type: '' //默认post
    }
  });
  var editquestion=layedit.build('question',{
    tool: ['image'],height:80
  });

  var editanswer=layedit.build('answer',{
    tool: ['image'],height:60
  });
  
  // var editanswer2=layedit.build('answer2',{
  //   tool: ['image'],height:60
  // });
  // var editanswer3=layedit.build('answer3',{
  //   tool: ['image'],height:60
  // });
  // var editanswer4=layedit.build('answer4',{
  //   tool: ['image'],height:60
  // });
  //提交表单的时候同步内容到 textarea
  form.verify({ 
            question: function(value) { return layedit.sync(editquestion); }
            ,answer: function(value) { return layedit.sync(editanswer); }
            // ,answer2: function(value) { return layedit.sync(editanswer2); }
            // ,answer3: function(value) { return layedit.sync(editanswer3); }
            // ,answer4: function(value) { return layedit.sync(editanswer4); }
  });
  //选择单选多选时的提示
  form.on('radio(selecttype)', function(data){
    //console.log(data.elem); //得到radio原始DOM对象
    //console.log(data.value); //被点击的radio的value值
    if (data.value==1) {
       layer.tips('单选题，只有一个正确答案！', data.othis)
    } else {
        layer.tips('多选题，可以有多个正确答案！', data.othis);
    }
    
  });  
  
   var an=layedit.getContent(editanswer).replace(/<p>/g,'').split('</p>');
    //.replace(/<p>/g,'').split('</p>');
  
    //$('#selectright').html(answer_arr[0]);
    //console.log(answer);
   
 
    
     $('#showright').click(function(){
       console.log(typeof(layedit.getContent(editanswer)));
       alert(an);
    //   //alert(1);
    //   alert (answer);
    //   var qtype=$('#selecttyperadio>input[type=radio]:checked').val();
    //   var right='';
    //   if (qtype==='1') {
    //     $.each(answer_arr,function(i,j){
    //     console.log(i,j);
    //     })
    //   } else {
    //     alert(2);
    //   }
    //   return false;
     });

   //监听表单提交
  form.on('submit(select)', function(data){
      //console.log(data.field);

    // layer.alert(JSON.stringify(data.field), {
    //   title: '最终的提交信息'
    // });
    
    //alert(layedit.getContent(editanswer));
        // layer.confirm('确定提交?', {btn: ['提交','取消'],btnAlign: 'c', title:'请确认'}
        // ,function(index){
        //   //do something
        //     $.post("<{:url('question/do_add')}>",data.field,function(data,status){
        //       //alert(data);
        //       //alert(JSON.stringify(data));
        //       //console.log(data);
        //       if(data===1){
        //         layer.close(index);
        //         layer.msg('提交成功!',function(){
        //           window.location.reload()
        //           //window.history.back(-1); 
        //         }); 
        //       }else{
        //           layer.alert(data);
        //       }
                
              
        //    })
          
        // });  
   });
  //监听标题提交
  form.on('submit(titlesub)', function(data){
      //console.log(data.field);

    // layer.alert(JSON.stringify(data.field), {
    //   title: '最终的提交信息'
    // });
    
    //alert(layedit.getContent(editquestion));
        layer.confirm('确定提交?', {btn: ['提交','取消'],btnAlign: 'c', title:'请确认'}
        ,function(index){
          //do something
            $.post("<{:url('question/title_add')}>",data.field,function(data,status){
              //alert(data);
              //alert(JSON.stringify(data));
              //console.log(data);
              if(data===1){
                layer.close(index);
                layer.msg('提交成功!',function(){
                  window.location.reload()
                  //window.history.back(-1); 
                }); 
              }else{
                  layer.alert(data);
              }
                
              
           })
          
        });  
   });

  


});


</script>

</body>
</html>